<extend name="default/template/base_scoreshop" />

<block name="head">
<style>
html,body{height:100%;width:100%;}
a{text-decoration: none;}
body{padding-top: 20px;padding-bottom: 20px;}
ul,li{list-style: none;}
td{padding-left: 0!important;padding-right: 0!important;}
strong{color:#ff6ea5;font-weight: normal;}
input,select{outline-color: #ff6ea5 !important;}
.address{display: none;}
.price{border-bottom: 1px #ddd solid;padding-bottom: 1rem;margin-bottom: 1rem;}
.am-table{padding-left: 2em !important;}
.am-modal .table tr:first-child td{border-top:none;}
.hide{display:none;}
.am-modal {width: 80%;position: fixed;display: block !important;z-index: 1110;
/*max-height: 500px;*/
text-align: center;border-radius: 0;opacity: 0;transition: all .5s;left: -90%;
top: 35%;transition:left .2s;}
/*.fade{ -webkit-filter:brightness(.5);filter:brightness(.5);}*/
.am-btn{color:white;}
.color{color:#ff6ea5;}
.bgcolor{background:#ff6ea5 url(__IMG__/scoreshop/btn_bg.gif);}
.am-container{height: 100% !important;}
.am-modal-btn{color:#ff6ea5;}
.am-modal:focus {outline: 0;}
.am-modal.am-modal-active {left:50%;opacity: 1;}
.am-modal-dialog {background: #f8f8f8;}
.am-modal-hd{height: 0px;}
.am-modal-bd {padding: 10px;height: 100%;text-align: center;overflow-y:scroll;position: relative;border-bottom: 1px solid #dedede;}
.am-icon-checked{color: #ff6ea5 !important;}
.addressList{padding-left: 0px;}
.addressList li{background: #f1f1f1 url(__IMG__/scoreshop/bortop.png)  0 top repeat-x;color:#c5c5c5;padding: 10px 10px 10px 20px;margin-bottom: 15px;position:relative;}
.addressList li img{position:absolute;top:0;left:0;width:45px;}
.addressList li strong{font-size: 25px;color:#888;}
.addressList li .line1{ }
.addressList li .line2{ }
.bot{position:relative;width:100%;height:6rem;border-top: 1px #ddd solid;}
.bot .left{position:absolute;left:0;top:1rem;color:#999;padding-left: 2rem;line-height: 4rem;}
.bot button{position:absolute;right:1rem;top:1rem;bottom:1rem;height:4rem;transition:all .2s;padding-top: 0.625rem 1rem;}
.bot button:hover{color:pink !important;}
.payList{padding-left: 0;}
.payList li{font-size: 1.6rem;color:#aaa !important;line-height: 4rem;transition:all .2s;}
.disabled{background-color:#eee !important;}
.payList li img{width:4rem;padding-right: 1rem;}
.payList li span{float: right;color:#ff6ea5;font-size: 2.6rem;transition:all .2s;}
</style>
</block>

<block name="body">
<div class="body am-container">
	<!-- <img src="{$entry.path}" alt="" width="100%"> -->
  <div class="th"><strong>{$exchange.pname}</strong></div>
  <div class="th">兑换中 - ({$exchange['exchange_time']|date="Y-m-d h:i",###})</div>
	<div class="price">萌币{$exchange.score|intval}(已支付)<gt name="exchange.price" value="0"> +￥<strong>{$exchange.price}</strong>(待付款<gt name="exchange.pay_balance" value="0">,已支付{$exchange.pay_balance}</gt>)<else /></gt></div>
	<div class="bd">
    <div>选择收货地址</div>
    <input type="hidden" name="radio1" value="{$aid}" />
    <ul class="addressList">
      <empty name="address">您还没有收货地址<else/>
        <volist name="address" id="v">
        <li data-id="{$v['id']}">
          <img {$aid==$v['id']?'':'class="hide"'} src="__IMG__/scoreshop/select.png" alt="">
          <!-- <input type="radio" class="hide" name="radio1" value="{$v.id}" {$aid==$v['id']?'checked ':''}> -->
          <div class="line1"><strong>{$v.contactname}</strong>&nbsp;&nbsp;&nbsp;{$v.mobile}</div>
          <div class="line2">{$v.province}{$v.city}{$v.area}{$v.detailinfo}</div>
        </li>
        </volist>
      </empty>
      <!-- <li id='addrnew'>
        <label class="am-radio">
        <input type="radio"  name="radio1" value=""  data-am-ucheck><span class="text">使用新地址</span>
        </label>
      </li> -->
    </ul>
  </div>
  <neq name="exchange.price" value="0">
  <div class="bd">
    <div>选择付款方式</div>
    <ul class="payList">
      <li id="pay3" data-id="3" class="am-cf <neq name="msg" value="">disabled</neq>"><img src="__IMG__/scoreshop/wallet.png" alt="">余额支付 （<eq name="msg" value="">可用余额：{$wallet}<else />{$msg}</eq>）<span class="am-icon-square-o"></span></li>
      <li id="pay1" data-id="1" class="am-cf"><img src="__IMG__/scoreshop/alipay.png" alt="">支付宝支付<span class="am-icon-square-o"></span></li>
			<li id="pay2" data-id="2" class="am-cf"><img src="__IMG__/scoreshop/wxpay.png" alt="">微信支付<span class="am-icon-square-o"></span></li>
    </ul>
  </div>
  </neq>
  <div class="bot">
  <neq name="exchange.price" value="0">
    <div class="left">结账: ￥<span class="color">{$price}</span></div>
    <button data-tar="" data-url="{:U('ScoreGoods/getPayUrl',array('uid'=>$uid,'psw'=>$psw,'id'=>$id))}" class="am-btn am-btn-sm am-radius bgcolor exchange">前去付款</button>
  <else />
    <button data-tar="{:U('ExchangeLog/detail',array('uid'=>$uid,'psw'=>$psw,'id'=>$id))}" data-url="{:U('ScoreGoods/addressset',array('uid'=>$uid,'psw'=>$psw,'id'=>$id))}" class="am-btn am-btn-sm am-radius bgcolor exchange">确定地址</button>
  </neq>
  </div>
  <!-- alert -->
  <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
      <div class="am-modal-hd"></div>
      <div class="am-modal-bd"></div>
      <div class="am-modal-footer">
        <span class="am-modal-btn">确定</span>
      </div>
    </div>
  </div>
  <!-- alert end -->
</div>

<script>
function myalert(con,ele){
  $('body').addClass('fade');
  if(!ele) ele='my-alert';
  if(!con) con='此地无银';
  $('#'+ele).addClass('am-modal-active').find('.am-modal-bd').html(con);
}
$(function(){
  var wallet = {$wallet},t;
  var price  = {$price},v='000';
  $('#pay3').click(function(){
    $this = $(this).find('span');
    changeV(3,$this.hasClass('am-icon-square-o') ? 1:0);
    $this.toggleClass('am-icon-square-o').toggleClass('am-icon-check-square');
    if(wallet>price){
      changeV(1,0);changeV(2,0);
      $('#pay1,#pay2').toggleClass('disabled').find('span').removeClass('am-icon-check-square').addClass('am-icon-square-o');
    }
  })
  //allstr:原始字符串,start,开始位置,changeStr:改变后的字
  function changeV(start,changeStr){
   if(v.length >= start){
      v = v.substring(0,start-1)+changeStr+v.substring(start,v.length); 
   }
   // console.log('v:'+v);
  }
  $('#pay1,#pay2').click(function(){
    if(wallet>price && $('#pay3>span').hasClass('am-icon-check-square')){
      changeV(1,0);changeV(2,0);
      $('#pay1>span,#pay2>span').addClass('am-icon-square-o').removeClass('am-icon-check-square');
      return;
    }
    $this = $(this).find('span');
    t = parseInt($(this).data('id'));
    $next = $('#pay'+(t ==2 ? 1:2)).find('span');
    if($this.hasClass('am-icon-square-o')){
       //check this
      changeV(t,1);
      //uncheck next
      changeV(t==2 ? 1:2,0);
      $next.addClass('am-icon-square-o').removeClass('am-icon-check-square');
    }else{
      //uncheck this
      changeV(t,0);
      //uncheck next
      changeV(t==2 ? 1:2,0);
      $next.addClass('am-icon-square-o').removeClass('am-icon-check-square');
    }
    $this.toggleClass('am-icon-square-o').toggleClass('am-icon-check-square');
  })
  $('.am-modal-btn').click(function(){
    $('body').removeClass('fade');
    $('.am-modal').removeClass('am-modal-active');
  });
  var click = true;
  $('.exchange').click(function(){
    if(click){
      click = false;
      var s = parseInt($('input[name="radio1"]').val());
      var p = parseInt($('input[name="pay"]').val());
      if(!s){myalert('请选择收货地址');click=true;return false;}
      if(v == '000'){myalert('请选择支付方式');click=true;return false;}
      if(v == '003' && wallet<price){myalert('余额不足以支付');click=true;return false;}
      // if(!confirm('确定使用此地址发货吗？')){return false;}
      var url = $(this).data('url');
      var tar = $(this).data('tar');
      $.ajaxSettings.async = false;
      $.getJSON(url,{ 'addressid': s,'pay':v },function(data){
        click = true;
        // console.log(data);
        if(!data.status){
          myalert(data.info);
        }else{
          // myalert(tar);
          // console.log(data.back_url);
          self.location = data.back_url;
        }
      });
    }
  });
  // $('#addrnew').on('click',function(){
  	// alert('show');
  	// $(this).find('input').uCheck('check');
		// $('.address').show();
  // });//.on('blur',function(){
  // 	alert('hide');
  // });
  $(".addressList>li:not('#addrnew')").on('click',function(){
    $this = $(this);
    $('.addressList img').addClass('hide');
    $this.find('img').removeClass('hide');
    $('input[name="radio1"]').val($this.data('id'));
  });
})
</script>
</block>